<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'

const tableData = ref([])


function yh(n) {
  axios.get('/api/user/getUserMap', {
    params: {
      k: n
    },
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then((res) => {
    for (let i = 0; i < res.data.data.length; i++) {
      tableData.value.push(res.data.data[i])
    }
  })
}

yh(1)
const loa = ref(true)
const el_table = ref(false)
setTimeout(() => {
  loa.value = false
  el_table.value = true
}, 1000)

function rev(n) {
  axios.get('/api/user/remUser', {
    params: {
      id: n
    },
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then((res) => {

    let myArray = tableData.value
    myArray = myArray.filter(function(item) {
      return item.email !== n
    })
    tableData.value = myArray

  })


}
</script>

<template>
  <div style="width:100%;height:100%" v-loading="loa">
    <el-table :data="tableData" style="width: 100%;overflow: hidden" v-if="el_table">
      <el-table-column prop="img" label="头像" width="200">
        <template v-slot="scope">
          <div class="img">
            <img :src="scope.row.img" alt="" width="100%" height="100%">
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed prop="email" label="账号" width="240" />
      <el-table-column prop="password" label="用户类型" width="120" />
      <el-table-column prop="phone" label="电话" width="180" />
      <el-table-column prop="user" label="昵称" width="200" />
      <el-table-column fixed="right" label="编辑" min-width="120">
        <template v-slot="s">
          <el-button link type="primary" size="small" @click="rev(s.row.email)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<style scoped>
.img {
  width: 80px;
  height: 80px;
  margin-top: 10%;
  margin-bottom: 10%;
  border-radius: 100px;
  overflow: hidden;

}
</style>